<template>
  <view style="padding-bottom: 50px">
    <view>
      <!-- 选择收货地址的盒子 -->
      <view class="address-choose-box" v-if="addressList.length === 0">
        <button
          type="primary"
          size="mini"
          class="btnChooseAddress"
          @click="chooseAddress"
        >
          请选择收货地址+
        </button>
      </view>

      <!-- 渲染收货信息的盒子 -->
      <view class="address-info-box" v-else>
        <view class="row1">
          <view class="row1-left">
            <view class="username"
              >收货人：<text>{{ addressList[0].reciver }}</text></view
            >
          </view>
          <view class="row1-right">
            <view class="phone"
              >电话：<text>{{ addressList[0].phone }}</text></view
            >
            <uni-icons type="arrowright" size="16"></uni-icons>
          </view>
        </view>
        <view class="row2">
          <view class="row2-left">收货地址：</view>
          <view class="row2-right">{{ addressList[0].addressP }} </view>
        </view>
      </view>

      <!-- 底部的边框线 -->
      <hr class="hr3" />
    </view>

    <!-- 购物车商品列表的标题区域 -->
    <view class="cart-title">
      <!-- 左侧的图标 -->
      <uni-icons type="shop" size="18"></uni-icons>
      <!-- 描述文本 -->
      <text class="cart-title-text">购物车</text>
    </view>
    <uni-swipe-action v-if="cart.length !== 0">
      <!-- 购物车列表 -->
      <block v-for="(goods, index) in cart" :key="index">
        <uni-swipe-action-item :right-options="options">
          <MyGoods
            :goods="goods"
            :show-radio="true"
            @radio-change="radioChangeHandler"
            :show-num="true"
            @num-Change="numberChangeHandler"
          ></MyGoods>
          <!-- 删除按钮 -->
          <template v-slot:right>
            <button class="slot-button" @click="swipeActionClickHandler(goods)"
              ><text class="slot-button-text">删除</text>
            </button>
          </template>
        </uni-swipe-action-item>
      </block>
    </uni-swipe-action>

    <!-- 空白购物车区域 -->
    <view class="empty-cart" v-else>
      <image src="@/static/icons/collapse.png" class="empty-img"></image>
      <text class="tip-text">空空如也~</text>
    </view>

    <MySettle></MySettle>
  </view>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      // 收货地址
      address: [],
    };
  },
  computed: {
    ...mapState("goods", ["cart"]),
    ...mapState("address", ["addressList"]),
  },
  onShow() {
    this.setBadge();
    // this.address = this.addressList;
  },
  methods: {
    ...mapMutations("address", ["getAddress"]),
    ...mapMutations("goods", [
      "updateGoodsState",
      "updateGoodsNum",
      "delGoods",
    ]),
    setBadge() {
      wx.setTabBarBadge({
        index: 2,
        text: this.cart.length + "",
      });
    },
    // 选中商品
    radioChangeHandler(goods) {
      this.updateGoodsState(goods);
    },
    // 修改商品数量
    numberChangeHandler(goods) {
      this.updateGoodsNum(goods);
    },
    // 删除商品
    swipeActionClickHandler(goods) {
      uni.showModal({
        title: "提示",
        content: "确定删除吗？",
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if (confirm) {
            this.delGoods(goods);
          }
        },
      });
    },
    // 选择地址
    chooseAddress() {
      const address = {
        reciver: "陈智威",
        phone: 19856659878,
        addressP: "广东省广州市花都区 秀全街道学府路1号",
      };
      this.getAddress(address);
    },
  },
};
</script>

<style lang="scss" scoped>
.hr3 {
  height: 5px;
  border: none;
  border-top: 5px ridge #eb4450;
}
// 底部边框线的样式
.address-border {
  display: block;
  width: 100%;
  height: 5px;
}

// 选择收货地址的盒子
.address-choose-box {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 渲染收货信息的盒子
.address-info-box {
  font-size: 12px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5px;

  // 第一行
  .row1 {
    display: flex;
    justify-content: space-between;

    .row1-right {
      display: flex;
      align-items: center;

      .phone {
        margin-right: 5px;
      }
    }
  }

  // 第二行
  .row2 {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .row2-left {
      white-space: nowrap;
    }
  }
}

.cart-title {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  .cart-title-text {
    margin-left: 10px;
  }
}
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;

  .empty-img {
    width: 90px;
    height: 90px;
  }

  .tip-text {
    font-size: 12px;
    color: gray;
    margin-top: 15px;
  }
}
.slot-button {
  /* #ifndef APP-NVUE */
  display: flex;
  height: 100%;
  /* #endif */
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background-color: #ff5a5f;
}

.slot-button-text {
  color: #ffffff;
  font-size: 14px;
}
</style>